import React, { Component } from 'react';
import {
  Card,
  Button,
  Row,
  Col,
  Icon,
  Tabs,
  Table,
  Radio,
  DatePicker,
  Tooltip,
  Menu,
  Dropdown,
  Input,
  Divider,
  Popconfirm,
} from 'antd';
import { connect } from 'dva';
const { MonthPicker, RangePicker } = DatePicker;
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import numeral from 'numeral';
import { formatMessage, FormattedMessage } from 'umi/locale';
import moment from 'moment';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const { Search, TextArea } = Input;
import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  Field,
  Bar,
  Pie,
  TimelineChart,
} from '@/components/Charts';

const { Meta } = Card;

import Trend from '@/components/Trend';
import styles from './vip.less';

import { getValueWithLocalStorage } from '@/utils/authority';
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;

const namespace = 'vip';
const userInfo = getValueWithLocalStorage('userinfo');
import router from 'umi/router';
import config from '../../../config/web.config'

const mapStateToProps = state => {
  const list = state[namespace].templateList;
  const total = state[namespace].total;
  const isLoading = state[namespace].isLoading;

  return {
    list,
    total,
    isLoading,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    getServicesTempaltes: (_key, _page, _pagesize,_owner) => {
      const action = {
        type: `${namespace}/getServicesTempaltes`,
        payload: {
          key: _key,
          page: _page,
          pagesize: _pagesize,
          owner:_owner,
        },
      };
      dispatch(action);
    },


    delPackageTemplate: (_id,callback) => {
      const action = {
        type: `${namespace}/delPackageTemplate`,
        payload: {
          id: _id,
          callback:callback
        },
      };
      dispatch(action);
    },

    getVipCardList: (_key, _page, _pagesize,_owner) => {
    const action = {
      type: `${namespace}/getVipCardList`,
      payload: {
        key: _key,
        page: _page,
        pagesize: _pagesize,
        owner:_owner,
      },
    };
    dispatch(action);
  },

  };
};

@connect(
  mapStateToProps,
  mapDispatchToProps
)
export default class VipServiceTempalteList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      state: '-1', //维修状态:0维修中 1待结账 2已完成 3已取消
      page: '0',
      pagesize: '20',
      key: '',
      shopTel:this.props.location.query.shop  == undefined ? userInfo.tel:this.props.location.query.shop,
    };
  }

  componentDidMount() {
    config.loadlCNZZ()
    this.reloadData();
  }

  reloadData = () => {
    this.props.getServicesTempaltes(
      this.state.key,
      this.state.page,
      this.state.pagesize,
      this.state.shopTel
    );
  };


  render() {
    var that = this
    const extraContent = (
      <div className={styles.extraContent}>
        <Link className={styles.addBtn} to={{ pathname: userInfo == null ?'/vip-client/addTemplate':'/vip/addTemplate',query: {shop:that.state.shopTel}}}><Button type="primary">新增套餐模版</Button></Link>
      </div>
    );

    const columns = [
      {
        title: '模版名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '套餐价格',
        dataIndex: 'price',
        width:90,
        key: 'price',
      },
      {
        title: '有效期',
        dataIndex: 'deadline',
        key: 'deadline',
      },
      {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        width:80,
        render: (text, record) => (
          <Route>
            <span>
              <Link to={{ pathname:userInfo == null ?'/vip-client/addTemplate':'/vip/addTemplate', query: {...record,shop:that.state.shopTel} }}>编辑</Link>
              <Divider type="horizontal" />
              <Popconfirm
                title="确认删除此套餐模版?"
                onConfirm={() => {
                  that.props.delPackageTemplate(
                    record._id,res=>{
                      that.reloadData()
                    });
                }}
                okText="确认"
                cancelText="取消"
              >
                <a href="#" className={styles.delBtnStyle}>
                  删除
                </a>
              </Popconfirm>
            </span>
          </Route>
        ),
      },
    ];

    var that = this;
    return (
      <Card
        bordered={false}
        title={'套餐模版列表'}
        style={{ marginTop: 24 }}
        bodyStyle={{ padding: '0 0px 0px 0px' }}
        extra={extraContent}
      >


        <Table
          columns={columns}
          // rowSelection={{
          //   onSelect: (record, selected, selectedRows, nativeEvent) => {
          //     alert(record + selected + selectedRows + nativeEvent);
          //   },
          // }}
          pagination={{
            current: Number(this.state.page) + 1,
            loading: this.props.isLoading,
            pageSize: Number(this.state.pagesize),
            showSizeChanger: true,
            showQuickJumper: true,
            pageSizeOptions: ['1', '5', '10', '20', '50'],
            total: this.props.total,
            onShowSizeChange: (current, size) => {
              that.setState({ pagesize: size, page: 0 }, () => {
                that.reloadData();
              });
            },
            onChange: (page, pageSize) => {
              that.setState({ page: page - 1 }, () => {
                that.reloadData();
              });
            },
            showTotal: total => `总计 ${total} 条`,
          }}
          dataSource={this.props.list}
        />
      </Card>
    );
  }
}
